<template>
  <div class="flex items-center edit-remark">
    <text-ell
      :content="emptyText(content, '')"
      class="flex-initial mr-2 max-w-max"
    />
    <app-icon
      name="edit"
      class="edit-remark-icon hover:text-[#1D2129]"
      color="#BFC2C7"
      @click.stop="visible = true"
    />
    <basic-edit-remark-dialog
      v-model:visible="visible"
      :loading="loading"
      :content="content"
      :maxlength="20"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup lang="ts">
interface IProps {
  content: string | undefined
  submit: (content: string) => Promise<void>
}

const props = defineProps<IProps>()

const visible = ref(false)
const loading = ref(false)

const onSubmit = async (content: string) => {
  loading.value = true
  try {
    await props.submit(content)
    visible.value = false
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.el-icon {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
